<template>
  <div class="main-body">
    <el-form ref="form" :model="form" :inline="true" class="form-body" size="mini">
      <el-form-item label="操作员姓名">
        <el-input v-model="operName" size="small" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="操作员账号">
        <el-input v-model="operCount" size="small" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="操作员号码">
        <el-input v-model="operNum" size="small" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="searchMethod" size="small" icon="el-icon-search">查询</el-button>
        <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
        <el-button type="primary" @click="newPlan" size="small" icon="el-icon-plus">新增</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" :inline="true" class="form-body active" size="mini">
      <el-form-item label="操作员权限">
        <el-select v-model="operPermissions" placeholder="操作员权限" size="small">
          <el-option label="集团管理员" value="1"></el-option>
          <el-option label="集团操作员" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="table-body" ref="tableRef">
      <el-table
        :data="caseList"
        style="width: 100%;overflow: auto;padding: 0;"
        :max-height="tableHe-80"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-row-style="tableHeaderColor"
        :header-cell-style="{padding:'0px',background:'#E1F1FF'}"
      >
        <div slot="empty" class="empty">
          <span>暂无数据</span>
        </div>
        <af-table-column :show-overflow-tooltip="true" label="操作员姓名" prop="userName"></af-table-column>
        <af-table-column :show-overflow-tooltip="true" label="操作员号码" prop="userMsisdn"></af-table-column>
        <af-table-column :show-overflow-tooltip="true" label="操作员账号" prop="userAcct"></af-table-column>
        <af-table-column :show-overflow-tooltip="true" label="权限" prop="duty"></af-table-column>
        <af-table-column :show-overflow-tooltip="true" width="150" label="管辖组" prop="groupNameList"></af-table-column>
        <af-table-column :show-overflow-tooltip="true" label="操作时间" prop="modifyDate"></af-table-column>
        <af-table-column :show-overflow-tooltip="true" label="操作人" prop="modifyOperatorName"></af-table-column>
        <el-table-column label="操作" width="100px" v-if="caseList.length>0">
          <template slot-scope="scope">
            <el-button type="text" @click="editorRow(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteRow(scope.row)" v-show="scope.row.userId != userId">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="block"
        style="margin-top: 24px;position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);"
      >
        <el-pagination
          @size-change="sizeClick"
          @current-change="pageClick"
          :current-page="pageNum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
    <OperatorManageNew
      v-show="showOperFlag"
      :newOperFlag="newOperFlag"
      :updateOperFlag="updateOperFlag"
      :operInfoObject="operInfoObject"
      @emClosePop="emClosePop"
    ></OperatorManageNew>
  </div>
</template>

<script>
import OperatorManageNew from 'components/configServers/OperatorManage/OperatorManageNew';
import Storage from '@/base/storage.js';


export default {
  components: { OperatorManageNew },
  data () {
    return {
      form: '',
      operName: '',
      operCount: '',
      operNum: '',
      operPermissions: '',
      caseList: [],
      pageNum: '1',
      pageSize: '10',
      totalCount: 50,
      showPagination: true,//只有一页时隐藏分页
      tableHe: 1000,
      newOperFlag: false,
      updateOperFlag: false,
      operInfoObject: { userId: '' },
      showOperFlag: false
    }
  },
  computed: {},
  methods: {
    labelHead (h, { column, index }) {
      let l = column.label.length;
      let f = 15; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
      column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
      //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h('div', { class: 'table-head', style: { width: '100%' } }, [column.label]);
    },
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'color: #4389D6;height: 40px;'
      }
    },
    searchMethod () {
      this.operatorSearchMethod();
    },
    reset () {
      this.operCount = '';
      this.operNum = '';
      this.operName = '';
      this.operPermissions = '';
      this.pageNum = '1';
      this.pageSize = '10';
      this.operatorSearchMethod();
    },
    newPlan () {
      this.showOperFlag = true;
      this.newOperFlag = true;
      this.updateOperFlag = false;
      this.operInfoObject = {
        userId: ''
      }
    },
    pageClick (val) {
      this.pageNum = val;
      this.operatorSearchMethod();
    },
    sizeClick (val) {
      this.pageSize = val;
      this.operatorSearchMethod();
    },
    editorRow (item) {
      this.showOperFlag = true;
      this.newOperFlag = false;
      this.updateOperFlag = true;
      this.operInfoObject = item;
    },
    deleteRow (item) {
      console.log(item)
      let param = {
        "userId": item.userId
      }
      // 
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/lbs/usercenter/operator/deleteOperator', param).then(res => {
          if (res.data.retCode == '0') {
            this.$message({
              message: "删除成功",
              type: 'success'
            });
            this.operatorSearchMethod();
          } else {
            this.$message({
              message: res.data.retMsg,
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    emClosePop () {
      this.showOperFlag = false;
      this.newOperFlag = false;
      this.updateOperFlag = false;
      this.operatorSearchMethod();
    },
    //查询调用方法
    operatorSearchMethod () {
      let param = {
        "userAcct": this.operCount,
        "userMsisdn": this.operNum,
        "userName": this.operName,
        "duty": this.operPermissions,
        "pageNum": this.pageNum,
        "pageSize": this.pageSize
      }
      this.$http.post('/lbs/usercenter/operator/qryOperatorList', param).then(res => {
        if (res.data.retCode == '0') {
          this.caseList = res.data.pageData;
          this.totalCount = parseInt(res.data.total);
          this.caseList.forEach(item => {
            item.duty = item.duty == '1' ? '集团管理员' : '集团操作员';
            item.groupNameList = item.groupNameList.join(',');
          })
        } else {
          this.$message({
            message: res.data.retMsg,
            type: 'error'
          });
        }
      })
    }
  },
  mounted () {
    let obj = this.$refs.tableRef;
    this.userId = Storage.session.get('operatorId');
    this.tableHe = parseInt(window.getComputedStyle(obj).height);
    this.operatorSearchMethod();
  }
}
</script>

<style scoped lang="less">
.main-body {
  width: 1200px;
  height: 100%;
}
.table-body {
  margin-top: 93px;
  background: #fff;
  padding: 16px;
  position: absolute;
  width: 1200px;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border-bottom-right-radius: 15px;
}
.form-body {
  padding: 10px 20px 0;
  background: #fbfbfb;
  height: 30px;
  border-bottom: 0;
  border-top-right-radius: 15px;
}
.form-body.active {
  padding: 5px 20px 10px;
  background: #fbfbfb;
  height: 30px;
  border-bottom: 1px solid #e1e1e1;
  border-top-right-radius: 15px;
}
</style>
<style lang="less">
.main-body {
  .el-button--text {
    padding: 5px 0;
  }
  .el-input--small .el-input__inner {
    height: 28px;
    line-height: 28px;
  }
  .el-input--small .el-input__icon {
    line-height: 28px;
  }
  .el-button--small,
  .el-button--small.is-round {
    padding: 7px 15px;
  }
  .el-button--small,
  .el-button--small {
    border-radius: 6px;
  }
}
</style>
